/**
 * @flow
 */
import React from 'react'
// prettier-ignore
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
} from 'react-native'

import PropTypes from 'prop-types'
import NumUtil from '@/commons/utils/NumUtil'

const RxClick = props => {
  // prettier-ignore
  const { height, paddingH, paddingV, children,
    style, textStyle, onPress, ...other } = props

  const newStyle = {}
  if (NumUtil.isPositiveInt(height)) {
    newStyle.height = height
  }
  if (NumUtil.isPositiveInt(paddingH)) {
    newStyle.paddingHorizontal = paddingH
  }
  if (NumUtil.isPositiveInt(paddingV)) {
    newStyle.paddingVertical = 4
  }
  // console.log('RxClick - style=', style)
  // console.log('RxClick - newStyle=', newStyle)

  let chi = null
  if (children) {
    if (typeof children === 'string') {
      chi = <Text style={[styles.text, textStyle]}>{children}</Text>
    } else {
      chi = children
    }
  }

  return (
    <TouchableOpacity style={[styles.container]} {...other} onPress={onPress}>
      <View style={[styles.view, style, newStyle]}>{chi}</View>
    </TouchableOpacity>
  )
}

RxClick.prototype = {
  ...View.prototype,
  textStyle: PropTypes.any,
  height: PropTypes.number,
  paddingH: PropTypes.number,
  paddingV: PropTypes.number,
  onPress: PropTypes.func,
}

RxClick.defaultProps = {
  ...View.defaultProps,
  paddingH: 10,
  paddingV: 4,
  onPress: () => {},
}

export default RxClick

const styles = StyleSheet.create({
  container: {},
  view: {},
  text: {},
})
